<!--
 * @Descripttion: 地图
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-29 16:44:22
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-01 12:46:53
-->
<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-06-29 16:43:27
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 425px);
    }

    .total-map {
        height: calc(100vh - 355px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layuimini-title layui-font-20 items-center">
            <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
            巡查
            <span class="layui-badge layui-bg-blue">已结束</span>
        </div>
        <div class="section">
            <div class="layui-row mb-5">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">类型：</label>
                    <span class="layui-font-black">周期性计划</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">计划编号：</label>
                    <span class="layui-font-black">20250301000014</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">业务类型：</label>
                    <span class="layui-font-black">秩序环境（海淀）</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">作业周期：</label>
                    <span class="layui-font-black">2025-03-02 至 2025-03-02</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">执行人：</label>
                    <span class="layui-font-black">董志俭</span>
                    <span class="layui-font-gray layui-font-12">（秩序环境（海淀））</span>
                </div>

            </div>
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md4 p-4">
                        <b class="m-4">每日作业任务（6）</b>
                        <div class="y-scroll" id="grid-card">

                            <!-- <div class="layui-card solid">
                                <div class="layui-card-header">树村</div>
                                <div class="layui-card-body">
                                    <div class="mb-2">
                                        <label class="layui-font-gray">作业时间：</label>
                                        <span class="layui-font-black">08:00—23:59（小时）</span>
                                    </div>
                                    <div class="mb-2">
                                        <label class="layui-font-gray">作业里程：</label>
                                        <span class="layui-font-black">1.39公里</span>
                                    </div>
                                    <div class="mb-2">
                                        <label class="layui-font-gray">作业次数：</label>
                                        <span class="layui-font-black">1次</span>
                                    </div>
                                </div>
                            </div> -->
                        </div>


                    </div>
                    <div class="layui-col-md8">
                        <div class="view-map">
                            <div class="total-map">
                                <!-- <div class="line-info">
                                    <div class="line-info__item">
                                        <div class="line planLine"></div>
                                        <div class="info">计划路线</div>
                                    </div>
                                    <div class="line-info__item">
                                        <div class="line finishLine"></div>
                                        <div class="info">已完成路线</div>
                                    </div>
                                    <div class="line-info__item">
                                        <div class="line processLine">
                                            <img src="/assets/images/map/process.png" />
                                        </div>
                                        <div class="info">处理中路线</div>
                                    </div>
                                </div> -->
                                <!-- 地图信息 -->
                                <div id="totalMapContainer" class="amap-container">
                                </div>
                                <!-- 全屏/退出全屏 -->
                                <!-- <div class="fullscreen" id="toggleFullscreen">
             <i class="fullscreen-icon layui-icon layui-icon-screen-full"></i>
         </div> -->
                                <!-- <div class="gird-select">
                                    <h3 class="panel-title">
                                        <img src="assets/images/map/check.png" width="16" />
                                        作业网格
                                    </h3>
                                    <div class="panel-control">
                                        <div class="panel-checkboxes" id="grid-checkboxes"></div>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row mb-5">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">创建人：</label>
                    <span class="layui-font-black">18332878361</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md8 mt-3">
                    <label class="layui-font-gray">创建时间：</label>
                    <span class="layui-font-black">2025-03-03 00:35:00</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">最近更新人：</label>
                    <span class="layui-font-black">18332878361</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md8 mt-3">
                    <label class="layui-font-gray">最近更新时间：</label>
                    <span class="layui-font-black">2025-03-03 00:35:00</span>
                </div>

            </div>


        </div>
    </div>
</div>

<script>

// 

    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/


        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        let map = null
        map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })

         //https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0,// 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
                showTraffic: false,//叠加实时交通图层 默认值：false
                showRoad: false,//叠加路网图层 默认值：false

            });
            map.addControl(type);
        });

        
        setAmapPolygon()

        //第2步 ： 绘制其他图形下拉框的数据
        function setAmapPolygon() {
            $.getJSON("api/planDetail.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderGridCheck(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }



        // 存储多边形对象
        const polygonObjects = {};
        //当前选中
        const polygonCurObj = {};
        function renderGridCheck(data) {
            const container = $('#grid-card');
            container.empty(); // 清空旧元素

            data.lineList.forEach(item => {
                const gridName = item.lineName;
                const color = '#0080FF';
                const points = item.lineScope; // 解析 lineScope 为数组
                const checkboxId = `grid_${item.id}`;
                const checkboxHtml = `
                 <div class="layui-card solid" id="${checkboxId}">
                            <div class="layui-card-header">${gridName}</div>
                            <div class="layui-card-body">

                                <div class="mb-2">
                                    <label class="layui-font-gray">作业时间：</label>
                                    <span class="layui-font-black">08:00—23:59（小时）</span>
                                </div>
                                <div class="mb-2">
                                    <label class="layui-font-gray">作业里程：</label>
                                    <span class="layui-font-black">1.39公里</span>
                                </div>
                                <div class="mb-2">
                                    <label class="layui-font-gray">作业次数：</label>
                                    <span class="layui-font-black">1次</span>
                                </div>
                            </div>
                        </div>
                `;
                container.append(checkboxHtml);
                const polygon = miniAMap.createPolyline(points, {
                    color: color
                });
                // map.add(polygon);
                polygonObjects[checkboxId] = polygon;
                polygonCurObj[checkboxId] = item;
                // 绑定复选框事件
                // 绑定点击事件
                $(`#${checkboxId}`).on('click', function () {
                    $(this).toggleClass('selected');
                    const isSelected = $(this).hasClass('selected');
                    if (isSelected) {
                        mapCenter = points[0]
                        //重置中心 根据实际需求处理
                        map = miniAMap.initMap('totalMapContainer', {
                            zoom: 14,
                            center: mapCenter
                        })
                        map.add(polygon);

                    } else {
                        map.remove(polygon);
                    }
                    // 单选模式：只保留当前选中项
                    if (!$(this).hasClass('multi-select')) {
                        $(`.layui-card.solid`).not(this).removeClass('selected');
                        $(`.layui-card.solid`).not(this).each(function () {
                            const otherId = $(this).attr('id');
                            const otherPolygon = polygonObjects[otherId];
                            if (otherPolygon) {
                                map.remove(otherPolygon);
                            }
                        });
                    }
                });
            });
        }



        // var selectedCardId = $('.layui-card.solid.selected').attr('id');
        // console.log('selectedCardId')


        // 缓存图层实例
        const standardLayer = new AMap.TileLayer();
        const satelliteLayer = new AMap.TileLayer.Satellite();
        const roadNetLayer = new AMap.TileLayer.RoadNet();
        const trafficLayer = new AMap.TileLayer.Traffic();

        // 切换基础图层（标准 / 卫星）
        $('input[name="layer-base-item"]').on('change', function () {
            if ($(this).is(':checked')) {
                const layerId = $(this).data('id');
                map.setFeatures([]);
                if (layerId === 'AMap.TileLayer') {
                    // map.add(standardLayer);
                    var selectedCardId = $('.layui-card.solid.selected').attr('id');
                    //重置中心 根据实际需求处理
                    map = miniAMap.initMap('totalMapContainer', {
                        zoom: 14,
                        layers: [//只显示默认图层的时候，layers可以缺省
                            new AMap.createDefaultLayer()//高德默认标准图层
                        ],
                        center: mapCenter
                    })
                    map.add(polygonObjects[selectedCardId]);
                } else if (layerId === 'AMap.TileLayer.Satellite') {
                    map.add(satelliteLayer);
                }
            }
        });
        // 控制覆盖图层（路网 / 路况）
        $('input[name="layer-overlay-item"]').on('change', function () {
            var selectedCardId = $('.layui-card.solid.selected').attr('id');
            const layerId = $(this).data('id');
            const isChecked = $(this).is(':checked');
            if (layerId === 'AMap.TileLayer.RoadNet') {
                if (isChecked) map.add(roadNetLayer);
                else map.remove(roadNetLayer);
            } else if (layerId === 'AMap.TileLayer.Traffic') {
                if (isChecked) map.add(trafficLayer);
                else map.remove(trafficLayer);
            }
        });
    })
</script>